<template>
  <div class="layout" id="yardStroeInfo">
    <!-- the Nvar -->
    <van-sticky>
      <van-nav-bar title="院内暂存" left-arrow @click-left="onClickLeft" />
    </van-sticky>

    <!-- Smart navigation -->
    <div class="smart-navigation" v-show="step1">
      <span>智能导航</span>
      <div>
        <div>
          <span>当前定位</span>
          <span>
            <i class="iconfont icon-location" style="color:#3F87E6;"></i>
            XX医院XX楼XX层XX科室
          </span>
        </div>
        <div>
          <span>推荐暂存地</span>
          <span>XX医院XX楼XX暂存地</span>
        </div>
        <el-divider></el-divider>
        <el-button type="text" style="font-size:18px;" @click="step1 = false">规划路径</el-button>
      </div>
    </div>
    <!-- the ScanCode Step -->
    <van-steps :active="active" direction="vertical">
      <van-step>
        <p>步骤一</p>
        <!-- Before Scan -->
        <div class="step-div" v-show="step1" @click="step1 = false">
          <div class="icon-sty">
            <i :class="['iconfont', 'icon-tubiaolunkuo-', 'iconsty']"></i>
          </div>
          <span>扫描暂存地二维码</span>
        </div>
        <!-- After Scan -->
        <!-- the ScanCode Info for department ScanCode -->
        <div class="after-scan" v-show="!step1">
          <span class="info-title">暂存地信息</span>
          <div class="the-scan-info">
            <div>
              <span>暂存地名称:</span>
              <span>医院北楼暂存地</span>
            </div>
            <div>
              <span>暂存地位置:</span>
              <span>XX医院XX楼XX层XX科室XX号</span>
            </div>
            <div>
              <span>扫码时间:</span>
              <span>2020年8月21日 11:51</span>
            </div>
          </div>
          <div style="text-align:center;">
            <van-button
              plain
              type="info"
              size="small"
              :style="{ width: 30 + 'vw' }"
              @click="step1 = true"
              >重新扫描</van-button
            >
          </div>
        </div>
      </van-step>

      <!-- the Steps -->
      <van-step>
        <p>步骤二</p>
        <!-- Before Scan -->
        <div class="step-div" v-show="step2" @click="step2 = false">
          <div class="icon-sty">
            <i :class="['iconfont', 'icon-tubiaolunkuo-', 'iconsty']"></i>
          </div>
          <span>扫描交接人二维码</span>
        </div>
        <!-- After Scan -->
        <!-- the ScanCode Info for File ScanCode -->
        <div class="after-scan" v-show="!step2">
          <span class="info-title">交接人信息</span>
          <div class="the-scan-info">
            <div>
              <span>交接人姓名:</span>
              <span>张三</span>
            </div>
            <div>
              <span>联系方式:</span>
              <span>15883723040</span>
            </div>
            <div>
              <span>扫码时间:</span>
              <span>2020年8月21日 11:51</span>
            </div>
          </div>
          <div style="text-align:center;margin-bottom:10px">
            <van-button
              plain
              type="info"
              size="small"
              :style="{ width: 30 + 'vw' }"
              @click="step2 = true"
              >重新扫描</van-button
            >
          </div>
        </div>
      </van-step>
    </van-steps>

    <!-- the Store Waste Info -->
    <div
      class="waste-info"
      v-show="step1 == false && step2 == false"
      @click="toRouter"
    >
      <span>暂存废物信息</span>
      <div>
        <span>扫描医废箱</span>
        <div class="icon-sty">
          <i class="iconfont icon-tubiaolunkuo- the-icon"></i>
        </div>
      </div>
    </div>

    <van-button
      type="primary"
      v-show="step1 == false && step2 == false"
      :style="{ width: 100 + 'vw', margin: '20px 0' }"
      to="/ScanColl/getWeight"
      >开始称重</van-button
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 9,
      step1: true,
      step2: true,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    toRouter() {
      this.$router.push({
        path: "/yardScanWaste",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.layout {
  width: 100vw;
  min-height: 100vh;
  background-color: #dcdfe6;
  color: #707070;
  & .step-div {
    height: 15vh;
    line-height: 15vh;
    background-color: #ffffff;
    padding-right: 10px;
    border-radius: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon-sty {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 1px solid #000000;
      line-height: 50px;
      margin-right: 10px;
      background-color: #f2f6fc;
      .iconsty {
        font-size: 30px;
      }
    }
  }
  .after-scan {
    height: 220px;
    //   padding-right: 10px;
    background-color: #ffffff;
    border-radius: 10px;
    .info-title {
      display: block;
      background-color: #f2f6fc;
      height: 50px;
      line-height: 50px;
      font-size: 1rem;
      padding-left: 10px;
      color: #666666;
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;
    }
  }
  .the-scan-info {
    display: flex;
    flex-direction: column;
    padding: 10px;
    div {
      display: flex;
      span:nth-child(1) {
        margin-right: 15px;
        // font-weight: 900;
        min-width: 20vw;
      }
      span:nth-child(2) {
        color: #333333;
      }

      & span {
        margin-bottom: 15px;
        color: #666;
      }
    }
  }
  .smart-navigation {
    padding: 15px;
    font-size: 15px;
    & > span {
      display: block;
      font-size: 17px;
      margin: 10px 10px;
    }
    & > div {
      height: 148px;
      background-color: #ffffff;
      border-radius: 10px;
      padding: 10px;
      text-align: center;
      & > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 15px 0;
        & span:nth-child(2) {
          color: #333333;
        }
      }
    }
  }
  .waste-info {
    color: #333333;
    padding: 10px;
    margin-top: 20px;
    & span {
      display: block;
      margin: 10px;
    }
    & > div {
      height: 70px;
      background-color: #ffffff;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      .icon-sty {
        width: 40px;
        height: 40px;
        border: 1px solid #707070;
        border-radius: 50%;
        line-height: 40px;
        text-align: center;
      }
    }
  }
}

#yardStroeInfo {
  .van-steps {
    background-color: #dcdfe6;
  }
  .van-step--vertical {
    padding: 10px 10px 0px 0;
  }
}
</style>
